<template>
	<view class="page-container pb-0 bg-grey">
		<up-navbar safeAreaInsetTop fixed placeholder :autoBack="true">
			<template #center>
				<zjy-navbar-tabs :tabs="tabs" @tabClick="handleTabChange" :activeId="activeId" />
			</template>
		</up-navbar>
		<zjy-filters :data="filterData" @close="filterClose" />
		<view class="plr-24">
			<view class="lh-40 ptb-24 c-grey-86">共15笔订单，获得佣金 ¥98.23（含待结算 ¥26）</view>
			<scroll-view
				:scroll-y="true"
				@scrolltolower="loadMore"
				:refresher-enabled="true"
				:refresher-triggered="triggered"
				@refresherpulling="onPulling"
				@refresherrefresh="onRefresh"
				@refresherrestore="onRestore"
				@refresherabort="onAbort"
				:style="{
					height: scrollViewHeight,
				}"
			>
				<template v-if="listData && listData.length > 0">
					<view v-for="(item, index) in listData" :key="index" class="pb-16">
						<view class="order-item">
							<view class="space-between">
								<view class="flex-a c-grey-86">
									<image :src="imgBaseUrl + 'icon-order.png'" class="icon-28 mr-4" />
									<text>893888229292922</text>
									<text class="bd-left">买家 张三</text>
									<text class="bd-left">推广 李四</text>
								</view>
								<view class="fs-28 c-grey-4e">已结算</view>
							</view>
							<up-line color="#E5E6EB" margin="24rpx 0" />
							<view class="flex-a">
								<text>恩施站</text>
								<view class="bd-left">湖北自由行旗舰店</view>
							</view>
							<view class="order-content">
								<image
									src="https://oiz.zhijingyou.com/upload/2024/lvapps/1726650540-532718099638976.jpg"
									class="icon-160 radius-16"
									mode="aspectFill"
								/>
								<view class="flex-1 flex-col space-between ml-16">
									<view class="space-between">
										<view class="flex-1 text-2-ellipsis fs-28 font-bold mr-48">
											恩施大峡谷+腾龙洞景区+东湖磨山景区+武汉大学武汉+户部巷大学武汉
										</view>
										<view class="text-right">
											<view>
												<text class="fs-20">&yen;</text>
												<text class="fs-28 font-bold">198</text>
											</view>
											<view class="mt-8 c-grey-86">×2</view>
										</view>
									</view>
									<view class="c-grey-86">游玩日期 10-24</view>
								</view>
							</view>
							<view class="space-between flex-a pt-32 top-dashed">
								<view class="c-grey-86">
									<view>下单：12-12 18:13</view>
									<view class="mt-4">完成：12-12 18:13</view>
								</view>
								<view class="flex-a">
									<view class="flex-col flex-c">
										<text class="c-grey-86">实付金额</text>
										<view class="font-bold mt-8">
											<text class="fs-20">&yen;</text>
											<text class="fs-28 font-oppo">1198</text>
										</view>
									</view>
									<view class="flex-col flex-c amount-divide">
										<text class="c-grey-86">佣金(3%)</text>
										<view class="font-bold mt-8 c-red">
											<text class="fs-20">&yen;</text>
											<text class="fs-28 font-oppo">26</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</template>
				<zjy-empty emptyText="暂无数据" v-else-if="!freshing && searched"></zjy-empty>
			</scroll-view>
		</view>
	</view>
</template>

<script setup lang="ts">
import useCommonStore from "@/store/common"
import type { ZjyTabItem } from "@/types/common"
import { freshLoading } from "@/utils/fresh-loading"
import zjyFilters from "@/components/zjy-filters/index.vue"
import { CommissionStatus, SortList } from "@/components/zjy-filters/constant"
import { onLoad } from "@dcloudio/uni-app"

const imgBaseUrl = inject("imgBaseUrl")
const commonStore = useCommonStore()
const activeId = ref("1")
const tabs = ref<ZjyTabItem[]>([
	{
		name: "推广佣金",
		id: "1",
	},
	{
		name: "邀请佣金",
		id: "2",
	},
])

const handleTabChange = (type: string) => {
	activeId.value = type
}

//#region 初始化下拉刷新
const scrollViewHeight = `calc(100vh - ${commonStore.statusBarHeight + commonStore.navbarHeight}px - 176rpx)`
const searched = ref(false)
const freshLoadingRef = freshLoading()
let {
	loadMore,
	triggered,
	onPulling,
	onRefresh,
	onRestore,
	onAbort,
	getListData,
	listData,
	freshing,
	getListSuccessCallback,
} = freshLoadingRef
freshLoadingRef.listService.value = null
getListSuccessCallback.value = () => {
	searched.value = true
}
listData.value.push(...[1, 2])
//#endregion

//#region 筛选
const filterData = ref<any[]>([])
const filterClose = (data: any) => {
	console.log(data)
}
const initFilter = async () => {
	filterData.value = [
		{
			title: "全部日期",
			key: "date",
			type: "date",
		},
		{
			title: "综合排序",
			key: "sort",
			type: "single",
			value: SortList[0].id,
			data: SortList,
		},
		{
			title: "佣金状态",
			key: "status",
			type: "single",
			value: CommissionStatus[0].id,
			data: CommissionStatus,
		},
	]
}
//#endregion
onLoad(() => {
	initFilter()
})
</script>
<style lang="scss" scoped>
.order-item {
	padding: 32rpx 24rpx;
	background: $c-white;
	border-radius: 16rpx;
	.bd-left {
		margin-left: 24rpx;
		position: relative;
		&::before {
			position: absolute;
			content: "";
			left: -12rpx;
			width: 1rpx;
			top: 4rpx;
			bottom: 4rpx;
			background: $c-grey-e5;
		}
	}
	.order-content {
		display: flex;
		margin-top: 24rpx;
		padding-bottom: 32rpx;
		position: relative;
		&::before {
			position: absolute;
			content: "";
			bottom: -8rpx;
			left: -32rpx;
			width: 16rpx;
			height: 16rpx;
			border-radius: 50%;
			background: $grey;
		}
		&::after {
			position: absolute;
			content: "";
			bottom: -8rpx;
			right: -32rpx;
			width: 16rpx;
			height: 16rpx;
			border-radius: 50%;
			background: $grey;
		}
	}
	.top-dashed {
		position: relative;
		&::before {
			position: absolute;
			content: "";
			top: 0;
			left: -16rpx;
			right: -16rpx;
			border-bottom: 2rpx dashed $c-grey-e5;
		}
	}
	.amount-divide {
		position: relative;
		margin-left: 74rpx;
		&::before {
			position: absolute;
			content: "";
			left: -34rpx;
			top: 6rpx;
			bottom: 6rpx;
			width: 1rpx;
			background: $c-grey-e5;
		}
	}
}
</style>
